<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  /*main {
    min-height: calc(100vh - 2.5em - 7em);
    /* 避免内边距或边框搞乱高度的计算： 
    box-sizing: border-box;
  }*/
  
  body {
    display: flex;
    flex-flow: column;
    min-height: 100vh;
  }
  
  main {
    flex: 1;
  }
  
  footer {
    background: green;
  }
</style>

<body>
  <header>
    <h1>Site name</h1>
  </header>
  <main>
    <p>Bacon Ipsum dolor sit amet...
      <!-- 从baconipsum.com那里复制一些示意文字过来 -->
    </p>
  </main>
  <footer>
    <p>© 2015 No rights reserved.</p>
    <p>Made with ♥ by an anonymous pastafarian.</p>
  </footer>
</body>

</html>